
<template>
    <div class="customerListContainer">
			<pathTracking :path='path' />
			<div class="pageContent">
				<div class="createBtn">
					<div @click="createBtn"><img src="@/assets/img/button_plus.png" class="iconPlus" />创建客户</div>
				</div>

				<div class="navContent">
						<!--选项卡-->
						<el-tabs v-model="activeName" @tab-click="handleClick" class="customerTabNavs tabNavsBig">
							<el-tab-pane label="所有客户" name="allCustomer" >
								<el-row>
										<div class="tableTitle tableTitleBig">
											<div class="tableIcon"></div>
											<div class="tableText">查询条件</div>
										</div>
									</el-row>
									<!--搜索列表-->
									<div class="searchList">
										<advancedSearch ref="searcher1" :option="allSearchBox" @getChild="showChild" @onClear="onClear" @onSearch="toSearch" @onExport="toExport"></advancedSearch>
									</div>

									<div class="tableLayout">
										<!--表格头部-->
										<el-row>
											<div class="tableTitle tableTitleBig">
												<div class="tableIcon"></div>
												<div class="tableText">客户列表</div>
												<div class="exportBtn"><button><img src="@/assets/img/icon_upload.png" class="iconLayout">导出</button></div>
											</div>
										</el-row>
										<!--表格内容-->
										<tabelcom
											:total="total"
											:pageSize="pageSize"
											:pageNum='pageNum'
											:pageTotal="pageTotal"
											:tableData="tableData"
											:isSelection='true'
											@selectedHighlight="selectedHighlight"
											:columns="allCustormerTableH"
											@see="see"
											@edit="edit"
											@returnVisit ="returnVisit"
											@appointment="appointment"
											@handleSelectionChange="handleSelectionChange"
											@handleSizeChange="handleSizeChange"
											@handleCurrentChange="handleCurrentChange"
											:isShowEdit="isShowEdit"
											:rightW="rightW"
										></tabelcom>
									</div>
							</el-tab-pane>
							<el-tab-pane label="成交客户" name="dealCustomer">
									<el-row>
										<div class="tableTitle tableTitleBig">
											<div class="tableIcon"></div>
											<div class="tableText">查询条件</div>
										</div>
									</el-row>
									<!--搜索列表-->
									<div class="searchList">
										<advancedSearch ref="searcher2" :option="dealSearchBox" @onSearch="toDealSearch" @onClear="onClearDeal" @onExport="toExport"></advancedSearch>
									</div>

									<div class="tableLayout">
										<!--表格头部-->
										<el-row>
											<div class="tableTitle tableTitleBig">
												<div class="tableIcon"></div>
												<div class="tableText">客户列表</div>
											</div>
										</el-row>
										<!--表格内容-->
										<tabelcom
											:total="total"
											:pageSize="pageSize"
											:pageNum='pageNum'
											:pageTotal="pageTotal"
											:tableData="tableData"
											:isSelection ="true"
											@selectedHighlight="selectedHighlight"
											:columns="dealCustomerTableH"
											@see="see"
											@edit="edit"
											@returnVisit ="returnVisit"
											@appointment="appointment"
											@handleSelectionChange="handleSelectionChange"
											@handleSizeChange="handleSizeChange"
											@handleCurrentChange="handleCurrentChange"
											:isShowEdit="isShowEdit"
											:rightW="rightW"
										></tabelcom>
									</div>
							</el-tab-pane>
							<el-tab-pane label="潜在客户" name="potentialCustomer">
									<el-row>
										<div class="tableTitle tableTitleBig">
											<div class="tableIcon"></div>
											<div class="tableText">查询条件</div>
										</div>
									</el-row>
									<!--搜索列表-->
									<div class="searchList">
										<advancedSearch ref="searcher3" :option="potentialSearchBox" @onClear="onClearPotential" @onSearch="toPotentialSearch" @onExport="toExport"></advancedSearch>
									</div>

									<div class="tableLayout">
										<!--表格头部-->
										<el-row>
											<div class="tableTitle tableTitleBig">
												<div class="tableIcon"></div>
												<div class="tableText">客户列表</div>
											</div>
										</el-row>
										<!--表格内容-->
										<tabelcom
											:total="total"
											:pageSize="pageSize"
											:pageNum='pageNum'
											:pageTotal="pageTotal"
											:tableData="tableData"
											:isSelection =true
											@selectedHighlight="selectedHighlight"
											:columns="potentialTableH"
											@see="see"
											@edit="edit"
											@returnVisit ="returnVisit"
											@appointment="appointment"
											@handleSelectionChange="handleSelectionChange"
											@handleSizeChange="handleSizeChange"
											@handleCurrentChange="handleCurrentChange"
											:isShowEdit="isShowEdit"
											:rightW="rightW"
										></tabelcom>
									</div>
							</el-tab-pane>
							<el-tab-pane label="预约中客户" name="bookingCustomer" title="这个事情吗">
									<el-row>
										<div class="tableTitle tableTitleBig">
											<div class="tableIcon"></div>
											<div class="tableText">查询条件</div>
										</div>
									</el-row>
									<!--搜索列表-->
									<div class="searchList">
										<advancedSearch ref="searcher4" :option="bookingSearchBox" @onClear="onClearBooking" @onSearch="toBookSearch" @onExport="toExport" ></advancedSearch>
									</div>

									<div class="tableLayout">
										<!--表格头部-->
										<el-row>
											<div class="tableTitle tableTitleBig">
												<div class="tableIcon"></div>
												<div class="tableText">客户列表</div>
											</div>
										</el-row>
										<!--表格内容-->
										<tabelcom
											:total="total"
											:pageSize="pageSize"
											:pageNum='pageNum'
											:pageTotal="pageTotal"
											:tableData="tableData"
											:isSelection =true
											@selectedHighlight="selectedHighlight"
											:columns="bookingTableH"
											@see="see"
											@edit="edit"
											@returnVisit ="returnVisit"
											@appointment="appointment"
											@handleSelectionChange="handleSelectionChange"
											@handleSizeChange="handleSizeChange"
											@handleCurrentChange="handleCurrentChange"
											:isShowEdit="isShowEdit"
											:rightW="rightW"
										></tabelcom>
									</div>
							</el-tab-pane>
						</el-tabs>
				</div>
			</div>
    </div>
</template>
<script>
import pathTracking from '@/components/common/pathTracking'// 面包屑路径
import advancedSearch from'@/components/common/filter/advancedSearch' // 搜索列表
import datas from './datas.js'
import _axios from '@/tool/http.js'
import tabelcom from './../components/pages/table'
import verification from  '../components/js/verification'
export default {
  name: 'customerList',
  components: {
    pathTracking,
    advancedSearch,
		tabelcom,
  },
  data () {
    return {
      path: ['CRM', '客户管理', '客户列表'],
			tabNavs: datas.tabNavs, // 选项卡内容
			customerID:'',
      //checkTabNavs: datas.checkTabNavs, // 查看按钮选项卡内容
      // 选项卡选中
			activeName: 'allCustomer',
			activeIndex:'',//选项卡选中的下标

			allSearchBox:datas.allSearchBox,//所有客户 搜索框
			dealSearchBox:datas.dealSearchBox,//成交客户搜索框
			potentialSearchBox:datas.potentialSearchBox,//潜在客户
			bookingSearchBox:datas.bookingSearchBox,

      //filterOption: datas.filterOption, // 搜索框内容
      searchFromData: datas.searchFromData, // 按钮的内容
      tableHeadData: datas.tableHeadData, // 表头内容
			TableSelectData: [], // 表格选中的组

			tableData:[],//表格内容
			allCustormerTableH:datas.allCustormerTableH, //所有客户 表格表头信息
			dealCustomerTableH:datas.dealCustomerTableH, //成交客户 表格表头信息
			potentialTableH:datas.potentialTableH,//潜在客户 表格表头信息
			bookingTableH:datas.bookingTableH, //预约中客户

			total:1, //总条数
			pageSize:10, //每页多少条
			pageNum:1,//当前第几页
			pageTotal:1,//总页数
			isShowEdit:true,//是否显示编辑按钮
			rightW:300,//表格右侧操作宽度

			formLabelWidth: '120px',
			chachedata0:{},//用来保存保存当前表单 的集合，默认所有页面 不选
			chachedata1:{},//用来保存保存当前表单 的集合，默认所有页面 不选
			chachedata2:{},//用来保存保存当前表单 的集合，默认所有页面 不选
			chachedata3:{},//用来保存保存当前表单 的集合，默认所有页面 不选
			//customerInfo:{},

			phone:'',
			id:''
    }
  },
  methods: {
		createBtn(){ //创建
			this.$router.push({name:'createCustomer'})
		},

		see(par){ //查看
			var that = this;
			var customerID = par.id;
			var isBuy = par.isBuy;
			//console.log('点击查看',par);
			this.$router.push({path:'checkDetail',query:{id:customerID,isBuy:isBuy}});
    },
    edit(par){ //编辑
			//console.log('编辑',par);
			var that = this;
			var customerID = par.id;
			var isBuy = par.isBuy;
			this.$router.push({path:'edit',query:{id:customerID,isBuy:isBuy}})
    },
    returnVisit(par){ //回访
			console.log(par);
			var that = this;
			var customerID = par.id;
			var isBuy = par.isBuy;
			this.$router.push({name:'returnVisit',query:{id:customerID,isBuy:isBuy}})
    },

    appointment(par){ //转预约
			var customerType = par.customerType;
			this.phone = par.phone;
			this.id = par.id
			this.getPhone(this.phone,this.id);
		},
		
		//根据手机号查询是否有预约单
		getPhone(phone,id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url: that.apiCrm + '/reservationInfo/getByPhone?phone='+ phone,
        url: api.crm + '/reservationInfo/getByPhone?phone='+ phone,
      }).then((res) => {
				var data = res.data;
				if(data.status == 200){
					if(data.result.infoType == 1){//有未完结的预约单
            that.$message({
              message: '您已有一个未完结的预约单',
              type: 'warning'
            });
            setTimeout(function(){
              that.$router.replace({name:'customerList'})
            },2000)
          }else{
						//console.log('没有未完结订单,于是就获取填充的信息');
						that.$router.push({name:'toAppointment',query:{id:id}})
          }
        }else if(data.status == 500 && data.code == 1000050){
					that.$message({
              message: data.msg,
              type: 'warning'
            });
          //that.$router.replace({name:'customerList'})
				}else{
					that.$message({
              message: data.msg,
              type: 'warning'
            });
				}
			})
		},
    
    checkHandleClick (tab, event) {
      //console.log('看看选项卡',tab);
		},
		showChild(val){ //值
			//console.log('看一看',arguments)
		},

		//所有客户 查询
		toSearch (val) { //查询
			let regExp = /^[ ]*$/, flag = false;
			Array.isArray(val) && val.map(ele => {
				ele.value !== '' && ele.value != undefined && !regExp.test(ele.value) && (flag = true)
			})
			!flag && this.$message({
				message: '请输入查询内容进行查询',
				type: 'warning'
			})
			if(flag) {
				this.pageSize = 10; //点击查询，查询的页码置为1，每页条数置为10
				this.pageNum = 1;
				let allOption = { //所有客户
					id: val[0].value,
					name: val[1].value,
					phone: val[2].value,
					email: val[3].value,
					source: val[4].value,//val[2].data[val[2].value-1].label
					customerType: val[5].value,
					register: val[6].value,
					reservation: val[7].value,
					buy: val[8].value,
					callBack: val[9].value,
					createBy: val[11].value,
					idCard: val[12].value,
					exclusiveId: val[13].value,
				}
				if(val[10].value){
					allOption.createDateStart= new Date(val[10].value[0]).getTime();
					allOption.createDateEnd = new Date(val[10].value[1]).getTime() + 24 * 60 * 60 * 1000 - 1000;
				}
				this.chachedata0 = allOption;
				this.getTableData(allOption);
			}
		},
		onClear() {
			this.allSearchBox = Object.assign({}, datas.allSearchBox)
		},
		onClearDeal() {
			this.dealSearchBox = Object.assign({}, datas.dealSearchBox)
		},
		onClearPotential() {
			this.potentialSearchBox = Object.assign({}, datas.potentialSearchBox)
		},
		onClearBooking() {
			this.bookingSearchBox = Object.assign({}, datas.bookingSearchBox)
		},
		//成交客户 查询
		toDealSearch(val){
			let regExp = /^[ ]*$/, flag = false;
			Array.isArray(val) && val.map(ele => {
				ele.value !== '' && ele.value != undefined && !regExp.test(ele.value) && (flag = true)
			})
			!flag && this.$message({
				message: '请输入查询内容进行查询',
				type: 'warning'
			})
			if(flag) {
				this.pageSize = 10; //点击查询，查询的页码置为1，每页条数置为10
				this.pageNum = 1;
				let dealOption = {
						id: val[0].value,
						name: val[1].value,
						phone: val[2].value,
						email: val[3].value,
						source: val[4].value,
						register: val[5].value,
						reservation: val[6].value,
						callBack: val[7].value,
						createBy: val[9].value,
						idCard: val[10].value,
						exclusiveId: val[11].value,
						customerType:"1"
					}
					if(val[8].value){
						dealOption.createDateStart = new Date(val[8].value[0]).getTime();
						dealOption.createDateEnd = new Date(val[8].value[1]).getTime() + 24 * 60 * 60 * 1000 - 1000;
					}
				//console.log('成交客户搜索',allOption);
				this.chachedata1 = dealOption;
				this.getTableData(dealOption);
			}
      
		},
		//潜在客户 查询
		toPotentialSearch(val){
			let regExp = /^[ ]*$/, flag = false;
			Array.isArray(val) && val.map(ele => {
				ele.value !== '' && ele.value != undefined && !regExp.test(ele.value) && (flag = true)
			})
			!flag && this.$message({
				message: '请输入查询内容进行查询',
				type: 'warning'
			})
			if(flag) {
				this.pageSize = 10; //点击查询，查询的页码置为1，每页条数置为10
				this.pageNum = 1;
				let potentialOption ={ //潜在客户
					id: val[0].value,
					name: val[1].value,
					phone: val[2].value,
					email: val[3].value,
					source: val[4].value,
					register: val[5].value,
					callBack: val[6].value,
					createBy: val[8].value,
					customerType: "2"
				}
				if(val[7].value){
					potentialOption.createDateStart = new Date(val[7].value[0]).getTime();
					potentialOption.createDateEnd = new Date(val[7].value[1]).getTime() + 24 * 60 * 60 * 1000 - 1000;
				}
				this.chachedata2 = potentialOption;
				this.getTableData(potentialOption)
			}
		},
		//预约中客户
		toBookSearch(val){
			let regExp = /^[ ]*$/, flag = false;
			Array.isArray(val) && val.map(ele => {
				ele.value !== '' && ele.value != undefined && !regExp.test(ele.value) && (flag = true)
			})
			!flag && this.$message({
				message: '请输入查询内容进行查询',
				type: 'warning'
			})
			if(flag) {
				this.pageSize = 10; //点击查询，查询的页码置为1，每页条数置为10
				this.pageNum = 1;
				let bookingOption ={ //预约中客户
						id: val[0].value,
						name: val[1].value,
						phone: val[2].value,
						email: val[3].value,
						source: val[4].value,
						register: val[5].value,
						callBack: val[6].value,
						createBy: val[8].value,
						customerType:"3"
					}
				if(val[7].value){
					bookingOption.createDateStart = new Date(val[7].value[0]).getTime();
					bookingOption.createDateEnd = new Date(val[7].value[1]).getTime() + 24 * 60 * 60 * 1000 - 1000;
				}
				this.chachedata3 = bookingOption;
				this.getTableData(bookingOption)
			}
		},

    toExport (val) {
      console.log(val)
    },
    handleSelectionChange (selection) {
      // 选中的数组
      this.TableSelectData = selection
    },
    selectedHighlight (data) {
      // 如果选中则添加高亮样式
      if (this.TableSelectData.indexOf(data.row) > -1) {
        return {
          'background-color': '#FEF6EE'
        }
        return {}
      }
    },
    // 分页
		handleSizeChange (val) { //每页多少条
			this.pageSize = val;
      this.getTableData(this.chachedata);
    },
		handleCurrentChange (val) { //当前第几页-
			this.pageNum = val;
			if(this.activeIndex == 0){
				this.activeIndex = ''
			}
			this.chachedata.customerType = this.activeIndex;
      this.getTableData(this.chachedata);
		},
		testValues(val) {
			let regExp = /^[ ]*$/, flag = false;
			Array.isArray(val) && val.map(ele => {
				ele.value !== '' && ele.value != undefined && !regExp.test(ele.value) && (flag = true)
			})
			return flag
		},
		clearList() {
			this.tableData = []
			this.total = 0;  //全部条数
			this.pageNum = 1; //当前页
			this.pageTotal = 0;//总页数
		},
		handleClick (tab, event) {
			this.activeIndex = tab.index;
			this.pageNum = 1;
			if(tab.index == 1){
				let data = this.$refs.searcher2.getFormData();
				this.testValues(data) ? this.toDealSearch(data) : this.clearList();
			}else if(tab.index == 2){
				let data = this.$refs.searcher3.getFormData();
				this.testValues(data) ? this.toPotentialSearch(data) : this.clearList();
			}else if(tab.index == 3){
				// var type = {              
				// 	customerType:"3"
				// }
				let data = this.$refs.searcher4.getFormData();
				this.testValues(data) ? this.toBookSearch(data) : this.clearList();
			}else{
				let data = this.$refs.searcher1.getFormData();
				this.testValues(data) ? this.toSearch(data) : this.clearList();
			}
			this.activeName = tab.name;
    },
		//获取创建人
		getCreateBy(){
			var that = this;
			that.$ajax({
				url:api.base + '/systemUser/get',
				method:'POST',
				data:{}
			}).then((res) => {
				if(res.data.status === 200) {
						let arr = []
						res.data.result.map(ele => {
								arr.push({
									label: ele.userName,
									value: ele.sapUserId
								})
						})
						this.allSearchBox.items.map(ele => {
							ele.key === 'createBy' && (ele.data = arr)
						})
						this.dealSearchBox.items.map(ele => {
							ele.key === 'createBy' && (ele.data = arr)
						})
						this.potentialSearchBox.items.map(ele => {
							ele.key === 'createBy' && (ele.data = arr)
						})
						this.bookingSearchBox.items.map(ele => {
							ele.key === 'createBy' && (ele.data = arr)
						})
				}
			})
		},
		//获取所有客户列表信息
		getTableData(parm){
			console.log(parm, 'paramsssssss')
			var that = this;
			that.$ajax({
				url:api.crm + '/customerInfo/list/'+ this.pageSize + '/' + this.pageNum,
				//url:that.apiCrm + '/customerInfo/list/'+ this.pageSize + '/' + this.pageNum,
				method:'POST',
				data:parm || {},
			}).then((res) => {
				that.tableData = [];
				var data = res.data;
				if(data.status == 200){
					var tableList = data.result.result;
					that.total = data.result.total;  //全部条数
					that.pageNum = data.result.pageIndex; //当前页
					that.pageSize = data.result.pageSize; //每页数量
					that.pageTotal = data.result.pageTotal;//总页数
					if(tableList.length > 0){
						var tdObj = {};
						for(var i = 0;i<tableList.length;i++){
							tdObj = {
								sort:tableList[i].sort,
								source:tableList[i].source,
								id:tableList[i].id,
								phone:tableList[i].phone,
								name:tableList[i].name,
								sex:tableList[i].sex,
								email:tableList[i].email,
								customerType:tableList[i].customerType,
								isRegister:tableList[i].isRegister, //注册
								isReservation:tableList[i].isReservation,  //预约
								isBuy:tableList[i].isBuy,
								level:tableList[i].level,
								isCallback:tableList[i].isCallback, //回访
								createName:tableList[i].createName,
								createTime:tableList[i].createTime,
							}
							//判断客户类型
							tdObj.isBtnShow = true;
							if(tableList[i].customerType == 1){
								tdObj.customerType = '成交客户';
							}else if(tableList[i].customerType == 2){
								tdObj.customerType = '潜在客户';
							}else if(tableList[i].customerType == 3){
								tdObj.isBtnShow = false;
								tdObj.customerType = '预约中客户';
							}
						
							//是否回访
							if(tableList[i].isCallback == 1){
								tdObj.isCallback = '是'
							}else {
								tdObj.isCallback = '否'
							}
							//是否注册isRegisters
							if(tableList[i].isRegister == 1){
								tdObj.isRegister = '是'
							}else {
								tdObj.isRegister = '否'
							}
							//是否购买 isBuy
							if(tableList[i].isBuy == 1){
								tdObj.isBuy = '是'
							}else {
								tdObj.isBuy = '否'
							}
							//是否预约 isReservation
							if(tableList[i].isReservation == 1){
								tdObj.isReservation = '是'
							}else {
								tdObj.isReservation = '否'
							}
							that.tableData.push(tdObj);
						}
					}else{
						// that.$message({
						// 	message: '暂无数据',
						// 	type: 'warning'
						// });
					}
				}
			}).catch((err) =>　{
				this.$message({
          message: '获取列表数据失败',
          type: 'warning'
        });
			})
		}
	},
	watch:{
		// $route:{
		// 	handler(newValue,oldValue){
		// 		if(newValue.name == 'customerList'){
		// 			if(this.activeIndex == 0){
		// 				this.activeIndex = ''
		// 			}
		// 			this.chachedata.customerType = this.activeIndex;
		// 			this.getTableData(this.chachedata);	
		// 		}	
		// 	}
		// }
	},
	created: function () {
		// this.getTableData({});
		this.getCreateBy()
	},
}
</script>

<style>
@import '../components/css/viewCommon.css';

/*预约客户 旁边的小问号*/
#tab-bookingCustomer{
	position: relative;
}
/* #tab-bookingCustomer:after{
	content: '';
	display: inline-block;
	background: url('../../../../assets/img/icon_questionmark.png') no-repeat center center;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 16px;
	right: -20px;
} */

</style>

<style scoped>
	.pageContent{
		    padding: 16px;
	}
 .pagination-cont{
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
.dr-form{
	border-radius:0 !important
}
.bread-nav{
	position: fixed;
	top: 144px;
	z-index: 99;
}
.endFormItem div:last-child .normal-btn{
	margin-right: 0 !important
}
.navContent{
	background: #F3F3F3;
	margin-top: 0 !important
}
	.createBtn div{
		background-color: #7e6b5a;
    color: #fff;
    height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
    width: 100px;
    border-radius: 20px;
    font-size: 14px;
		border: 0
	}
	.createBtn div:hover,.createBtn div:active,.createBtn div:focus{
		background-color: #7e6b5a;
		color: #fff;
		cursor: pointer;
	}

  .tableLayout{
    background-color: #fff;
    margin-top: 14px;
    border-radius: 8px
  }
	.tableLayout .el-table{
		padding: 0 16px
	}
	.tableLayout .tableInfo{
		padding: 0 16px
	}
  .el-dialog .el-dialog__body >.tableTitle{
    background-color: #f3f3f3;
  }
	.tableTitle .exportBtn{
		float: right;
		height: 100%;
    display: flex;
    align-items: center;
	}
	.tableTitle .exportBtn button{
		height: 32px;
    width: 72px;
    background-color: #fff;
    border: 1px #7e6b5a solid;
    border-radius: 16px;
		color: #7e6b5a;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
	}
	.iconPlus{
		width: 12px;
		height: 12px;
		margin-right: 4px
	}
	.iconLayout{
		width: 12px;
		height: 12px;
		margin-right: 4px
	}
	.el-table th .cell{
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;;
		font-size: 14px;
		color: #222
	}
	.dialog-footer{
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 30px 40px
	}
	/* @media screen and (min-width: 1200px){
		.contentLayout {
			width: 100%;
			height: 800px;
			overflow-y: auto;
		}
	} */

	.el-table__row .cell button.bookBtn{
		background-color: #fff;
		color: #7e6b5a;
		border: 1px #7e6b5a solid
	}
	.tableLayout .el-pagination {
		white-space: nowrap;
		padding: 2px 5px;
		color: #303133;
		font-weight: 700;
	}
	.el-tabs__item{
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
	}
	/* .checkTabNavs .el-tabs__item{
		position: relative;
	} */
	.el-tabs__item:hover{
		color: #7e6b5a
	}
	.el-tabs--card>.el-tabs__header{
		border: 0;
		margin: 0
	}
	.customerTabNavs.el-tabs--card>.el-tabs__header .el-tabs__nav,.el-tabs--card>.el-tabs__header .el-tabs__item{
		border: 0;
	}
	.el-tabs--card>.el-tabs__header .el-tabs__item:focus{
		color: #7e6b5a;
	}

	.dr-form{
		margin-top: 0 !important;
		/* padding: 10px !important */
	}
	.el-table th>.cell,.el-table-column--selection .cell{
		display: inline
	}

	#allCustomer table tr th,#allCustomer table tr td{
		text-align: center
	}
	.search-cont{
		padding: 16px 0;
		background: #fff;
		margin-bottom: 24px;
		border-radius: 8px
	}
	.dr-form{
		margin-top: 0;
		padding: 0
	}
	.formEdit .el-form-item label{
		width: 120px
	}
	@media screen and (min-width: 1200px){
		.el-dialog {
			overflow-y: auto;
		}
	}
	/*普通用户*/
	.formCustomerOrdinary{
		margin: 40px 0
	}
	.formLayout .el-form-item{
		display: flex;
		justify-content: center;
	}
	.formCustomerOrdinary .el-form-item .el-form-item__label{
		width: 106px
	}
	.formCustomerOrdinary .el-form-item:last-child{
		margin-top:60px
	}

	/*分页*/
	.pageLayout{
    margin-bottom:100px;
		height: 88px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background-color: #fff;
  }
  .pageLayout .flexLayout{
    display: flex;
    justify-content: center
  }
</style>

